import * as React from 'react';
import { Tree, Row, Button, notification } from 'antd';
import http from '../../utils/http';
const { TreeNode } = Tree;


const renderItem = (item: any) => {
    return {
        title: `id:${item.userId}   
        昵称：${item.nickname}    
        邮箱：${item.email} 
        等级：G${item.shareLevel}
        业绩：${item.subNode}
        本金：${item.selfNode}
        `,
        key: item.userId,
        value: item
    };
}

interface State {
    userInfo: any,
    treeData: any[]
}

class Archite extends React.Component<{
    history: any,
}> {
    state: State = {
        userInfo: {
            email: '',
            userId: '',
        },
        treeData: [],
    }

    nodesCache: any[] = []

    componentDidMount() {
        const params = new URLSearchParams(this.props.history.location.search);
        const id = params.get("id");
        this.node(id);
    }

    //查看上一级
    async parent() {
        const userId = this.state.userInfo.userId
        let rootNode = await http.get(`/admin/users/${userId}/parent`);
        const rootData = rootNode.data.data;
        if (!!rootData) {

            this.setState({
                treeData: [renderItem(rootData)],
                userInfo: rootData
            })
        } else {
            notification.warning({ message: "没有上一级了" });
        }
    }

    //获取当前节点
    async node(userId: any) {
        let rootNode = await http.get(`/admin/users/${userId}/node`);
        const rootData = rootNode.data.data;
        this.setState({
            treeData: [renderItem(rootData)],
            userInfo: rootData
        })
    }

    //获取下级节点
    onLoadData(treeNode: any) {
        return new Promise<void>(async resolve => {
            const sonUserId = treeNode.props.eventKey;
            if (this.nodesCache.indexOf(sonUserId) >= 0) {
                return resolve();
            }
            const sonNode = await http.get(`/admin/users/${sonUserId}/nodes`);
            this.nodesCache.push(sonUserId);
            treeNode.props.dataRef.children = sonNode.data.data.map((item: any) => {
                return renderItem(item);
            });
            this.setState({
                treeData: this.state.treeData,
            });
            resolve();

        });
    }

    renderTreeNodes(data: any) {
        return data.map((item: any) => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} {...item} dataRef={item} />;
        });
    }

    public render() {
        return (
            <>
                <Row
                    style={{
                        marginBottom: "25px"
                    }}
                    type="flex"
                    justify="space-between"
                    align="middle"

                >
                    <div>当前账号：{this.state.userInfo.email}</div>
                    <Button onClick={this.parent.bind(this)}>查看上一级</Button>
                </Row>
                <Tree loadData={this.onLoadData.bind(this)}>{this.renderTreeNodes(this.state.treeData)}</Tree>
            </>
        );
    }
}

export default Archite;
